<!--
 * @Author: 汪军 624473119@qq.com
 * @Date: 2023-10-10 18:15:53
 * @LastEditors: 汪军 624473119@qq.com
 * @LastEditTime: 2023-12-07 17:10:54
 * @FilePath: \ekee-web\src\views\end\easy-link\EasyLink.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template lang="pug">
.order-detail-online
  .content
    .status.bold 状态：{{ goodsDetail.status_text }}
    .tabs.relative.mt2.flex.column.align-baseline
      .flex
        img.img(:src="order1")
        img.img(:src="order2", v-if="tabs[1].active")
        img.img(:src="order3", v-else)
        img.img(:src="order2", v-if="tabs[2].active")
        img.img(:src="order3", v-else)
        img.img(:src="order4", v-if="tabs[3].active")
        img.img(:src="order5", v-else)
      .flex.absolute
        .item.tc(
          v-for="(item, index) in tabs",
          :key="index",
          :class="{ active: !item.active }"
        ) {{ item.name }}
    .info.justify-start.mt42
      .title.bold 订单信息
      .content
        el-row(:gutter="40")
          el-col.item(:span="11")
            div 收货信息：
          el-col.item(:span="13")
            div 订单编号：{{ goodsDetail.order_no }}
          el-col.item(:span="11")
            div 收货人：{{ addressInfo.recipient }}
          el-col.item(:span="13")
            div 创建时间：{{ goodsDetail.createtime }}
          el-col.item(:span="11")
            div 手机号码：{{ addressInfo.mobile }}
          el-col.item(:span="13")
            div 支付时间：{{ goodsDetail.pay_time }}
          el-col.item(:span="11")
            div 收货地址：{{ addressInfo.province }}{{ addressInfo.city }}{{ addressInfo.county }}{{ addressInfo.address }}
          el-col.item(:span="13")
            div 发货时间：{{ goodsDetail.delivery_time }}
          el-col.item(:span="11")
          el-col.item(:span="13")
            div 收货时间：{{ goodsDetail.confirm_time }}
    .mt4.mb4.bold.f1 商品信息
    .good-info
      el-table(
        :data="tableData",
        :header-cell-style="tableHeaderStyle",
        :cell-style="tableCellStyle",
        empty-text="暂无数据",
        border,
        style="width: 100%"
      )
        el-table-column(prop="goods_name", label="标的名称", width="200")
        el-table-column(prop="goods_image", label="标的图片", width="200")
          template(v-slot="scope")
            img.img-size(:src="scope.row.goods_image")
        el-table-column(prop="category", label="行业类目", width="200")
        el-table-column(prop="goods_spec_name", label="规格名称", width="200")
        el-table-column(prop="price", label="单价", width="200")
        el-table-column(prop="quantity", label="数量", width="200")
    div(v-if="refund")
      .mt4.mb4.bold.f1 退款申请
      .refund.mb4 退款成功，您的易链值即将恢复 {{ have_money }}
      .refund 退款成功，您的先易额度即将恢复 {{ have_money }}，如您使用支付宝/微信支付，担保费将原路返回（如您使用对公打款，请联系易可易平台为您手动退款）
      .info.justify-start.mt4
        .content
          el-row(:gutter="40")
            el-col.item(:span="11")
              .flex.align-start 
                |
                |
                |
                div 退款图片：
                .refund-img
                  img(v-for="item in refund.voucher", :src="item")
              .refund-reason
                div 退款理由：{{ refund.reason }}
            el-col.item(:span="13")
              .refund-info 
                |
                |
                |
                .mb2.overdue 审核状态：{{ refund.status_text }}
                .mb2 发起时间：{{ refund.createtime }}
                .mb2 审核时间：{{ refund.review_time }}
                .mb2 审核人：{{ refund.reviewer }}
                div 驳回理由：{{ refund.review_reason }}
    .info.justify-start.mt42(v-if="express.length != 0") 
      |
      |
      |
      .title.bold 物流信息
      .expressage.flex.justify-between
        .flex.align-center
          img.logo.mr2(:src="dlbgc")
          span.f1.bold {{ goodsDetail.express_company }} {{ goodsDetail.express_no }}
        .flex.f2
          div(@click="onCopy(goodsDetail.express_no)") 复制
          el-divider(direction="vertical")
          div 联系电话：{{ goodsDetail.express_moblie }}
      .list.mt2.ml2
        el-timeline
          el-timeline-item(
            v-for="(item, index) in express",
            :key="index",
            :color="item.color",
            :size="item.size"
          ) 
            |
            |
            |
            .f4.mb2(:class="{ checked: index == 0 }") {{ item.context }}
            .f4.mb2(:class="{ checked: index == 0 }") {{ item.status }}
            .f5(:class="{ checked: index == 0 }") {{ item.time }}
    //- .info.justify-start.mt2(v-if="typeInfo==2")
    //-   .content
    //-     .f1.bold 审核
    //-     .flex.mt4 
    //-       .f3.bold 审核结果：
    //-       el-radio-group(v-model="auditResult")
    //-         el-radio(:label="20") 通过
    //-         el-radio(:label="30") 驳回
    //-     .flex.justify-center.mt4.mb4
    //-       el-button.btn(
    //-         type="primary",
    //-         size="large",
    //-         plain,
    //-         round,
    //-         @click="onCancel(formRef)"
    //-       ) 取消
    //-       el-button.btn(
    //-         type="primary",
    //-         size="large",
    //-         round,
    //-         @click="onConfirm(formRef)"
    //-       ) 确定
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import EnterpriseCertification from "@/components/EnterpriseCertification.vue";
import order1 from "@/assets/common/order-1.png";
import order2 from "@/assets/common/order-2.png";
import order3 from "@/assets/common/order-3.png";
import order4 from "@/assets/common/order-4.png";
import order5 from "@/assets/common/order-5.png";
import dlbgc from "@/assets/images/dlbgc.png";
import { copyContent } from "@/utils/copy";
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";
import { OrderDetail, OrderReview } from "@/api/easymain";

const router = useRouter();
const route = useRoute();
onMounted(() => {
  console.log("ffsdfdse", route.query.id, route.query.type);
  typeInfo.value = route.query.type;
  let id = route.query.id;
  if (id) {
    getOrderDetail(id);
  }
});
const have_money = ref("");
const typeInfo = ref(""); //type==1 正常订单线上线下 type==2退款订单线上线下
const goodsDetail = ref({}); //所有信息
const addressInfo = ref({}); //地址信息
const refund = ref({}); //退款申请
const progress = ref(""); //步骤条
const express = ref([]);
const getOrderDetail = (id) => {
  OrderDetail({ id: id }).then((res) => {
    if (res.code == 1) {
      console.log("tysafyt", res.data);
      confirmInfo.value.id = res.data.id;
      have_money.value = res.data.money;
      goodsDetail.value = res.data;
      tableData.value = res.data.goods_list;
      addressInfo.value = res.data.address;
      refund.value = res.data.refund;
      if (res.data.refund) {
        confirmInfo.value.reason = res.data.refund.review_reason;
      }

      console.log("refund.value", refund.value);
      progress.value = res.data.progress;
      express.value = res.data.express;
      console.log("fwsefew", progress.value);
      ElMessage({ message: res.msg, type: "success" });
      tabs.value.forEach((item, index) => {
        console.log("progress", progress.value);
        if (index <= Number(progress.value) - 1) {
          item.active = true;
        }
      });
    }
    if (res.code == 0) {
      ElMessage({ message: res.msg, type: "warning" });
    }
  });
};

const { proxy } = getCurrentInstance();
const tabs = ref([
  { name: "创建订单", active: false },
  { name: "买家付款", active: false },
  { name: "商家发货", active: false },
  { name: "买家确认收货", active: false },
]);

const tableHeaderStyle = ref({
  backgroundColor: "#E5E6EB",
  color: "#000000",
  textAlign: "center",
});
const tableCellStyle = ref({
  textAlign: "center",
});
const tableData = ref([
  
]);
const expressageList = ref([

]);
const auditResult = ref(20);

// 复制单号
const onCopy = (text) => {
  copyContent(text);
  proxy.$message.success("复制成功");
};

// 确定
const confirmInfo = ref({
  id: "",
  status: auditResult.value,
  reason: "",
  returnurl: "",
});
const onConfirm = (formEl) => {
  OrderReview(confirmInfo.value)
    .then((res) => {
      if (res.code == 1) {
        console.log("res", res.data);
        router.back();
      }
      if (res.code == 0) {
        ElMessage({ message: res.msg, type: "warning" });
      }
    })
    .catch((err) => {});

  // emits("confirm", form.value);
};
// 取消
const onCancel = (formEl) => {
  router.back();
};
</script>

<style lang="stylus" scoped>
.img-size {
  width: 133px;
  height: 100px;
  border-radius: 10px 10px 10px 10px;
}

.order-detail-online {
  background: #ffffff;

  .content {
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 20px;

    .status {
      padding-top: 44px;
      font-size: 24px;
    }

    .tabs {
      padding-bottom: 14px;
      border-bottom: 1px solid #E6E6E6;

      .img {
        width: 236px;
        height: 54px;
      }

      .item {
        width: 236px;
        height: 54px;
        line-height: 54px;
        color: #ffffff;
      }

      .active {
        color: #000000;
      }
    }

    .info {
      .title {
        margin-bottom: 20px;
        padding-bottom: 14px;
        font-size: 24px;
        border-bottom: 1px solid #E6E6E6;
      }

      .content {
        padding: 16px 12px 0px 12px;
        border: 1px solid #E6E6E6;
        box-sizing: border-box;

        .item {
          margin-bottom: 16px;
        }
      }

      .expressage {
        .logo {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
      }

      .checked {
        color: #2487E8;
      }

      .btn {
        width: 140px;
      }
    }

    .mt42 {
      margin-top: 42px;
    }

    .overdue {
      color: #E84026 !important;
    }

    .refund {
      color: #18BC9F;
      font-size: 16px;
    }

    .refund-img {
      img {
        margin-right: 14px;
        width: 133px;
        height: 100px;
        border-radius: 10px 10px 10px 10px;
      }

      img:last-child {
        margin-right: 0;
      }
    }

    .refund-reason {
      margin-top: 16px;
      padding: 16px;
      background: #F5F5F5;
      border-radius: 6px 6px 6px 6px;
    }

    .refund-info {
      padding: 16px;
      background: #F5F5F5;
      border-radius: 6px 6px 6px 6px;
    }
  }
}
</style>
